<template>
  <div class="login-page">
    <div class="login-form">
      <div class="login-pic">
        <span class="login-text">松果大数据系统</span>
      </div>
      <el-form :model="loginForm" :rules="rules" ref="loginForm">
        <el-form-item prop="userName" style="text-align:center">
          <el-input
            placeholder="请输入手机号"
            v-model="loginForm.userName"
            style="width:318px"
          >
            <template slot="prepend"><i class="el-icon-user"></i></template>
          </el-input>
        </el-form-item>
        <el-form-item prop="passWord" style="text-align:center">
          <el-input
            placeholder="请输入密码"
            v-model="loginForm.passWord"
            show-password
            @keyup.enter.native="loginBtn('loginForm')"
            style="width:318px"
          >
            <template slot="prepend"><i class="el-icon-lock"></i></template>
          </el-input>
        </el-form-item>
        <el-form-item style="text-align:center">
          <el-button
            type="primary"
            style="width:141px"
            @click="loginBtn('loginForm')"
            >登录</el-button
          >
        </el-form-item>
      </el-form>
    </div>
  </div>
</template>
<script>
import store from '../store/index'
import md5 from 'js-md5'
import { Base64 } from 'js-base64'
import { mapState } from 'vuex'
export default {
  computed: {
    ...mapState(['home'])
  },
  data() {
    let checkPhone = (rule, value, callback) => {
      let reg = /^1[345789]\d{9}$/
      if (!reg.test(value)) {
        callback(new Error('请输入11位手机号'))
      } else {
        callback()
      }
    }
    return {
      loginForm: {
        userName: '',
        passWord: '',
        ifSave: false
      },
      rules: {
        userName: [
          { required: true, message: '请输入手机号', trigger: 'blur' },
          {
            type: 'number',
            validator: checkPhone,
            message: '请输入11位有效手机号号码',
            trigger: ['blur']
          }
        ],
        passWord: [{ required: true, message: '请输入密码', trigger: 'blur' }]
      }
    }
  },
  mounted() {
    var getLoginData = localStorage.getItem('loginData')
    if (getLoginData != null) {
      this.loginForm = JSON.parse(Base64.decode(getLoginData))
    }
    let loginEvent = event => {
      if (event.keyCode === 13) {
        this.loginBtn('loginForm')
      }
    }
    document.body.addEventListener('keyup', loginEvent)
    this.$once('hook:beforeDestroy', () => {
      document.body.removeEventListener('keyup', loginEvent)
    })
  },
  methods: {
    loginBtn(formName) {
      this.$refs[formName].validate(valid => {
        if (valid) {
          if (this.loginForm.ifSave) {
            localStorage.setItem(
              'loginData',
              Base64.encode(JSON.stringify(this.loginForm))
            )
          }
          this.api
            .loginApi({
              account: this.loginForm.userName,
              password: md5(this.loginForm.passWord)
            })
            .then(data => {
              if (data.code == 1) {
                store.commit('home/getAuthorization', data.data.token)
                store.commit('home/getStartDate', new Date().getTime())
                store.commit('home/getuserInfoVo', data.data.userInfoVo)
                this.$router.push('/home')
              }
            })
        } else {
          return false
        }
      })
    }
  }
}
</script>
<style lang="scss" scoped>
.login-page {
  width: 100%;
  height: 100%;
  background: #1ea5bb;
  display: flex;
  justify-content: center;
  align-items: center;
  .login-form {
    width: 450px;
    height: 356px;
    border-radius: 15px;
    border: 1px solid #3fe9fc;
    box-shadow: 0px 3px 2px #1a8fa2;
    background: #30cbd9;
    .login-pic {
      height: 100px;
      margin-top: 30px;
      text-align: center;
    }
    .login-text {
      font-size: 31px;
      font-weight: bold;
      color: #fff;
      line-height: 41px;
      font-family: 'Microsoft YaHei';
    }
  }
}
</style>
